<!DOCTYPE html>
<html lang="zh-cn" class="fullscreen-bg" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta charset="utf-8">
    <title>demo</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="/admin/assets/libs/layui/css/layui.css" rel="stylesheet" />
    <link href="/admin/assets/module/admin.css" rel="stylesheet">
    <style>
        #titlebar {
            padding: 5px 5px;
            border: 1px solid #e6e6e6;
            background-color: #f2f2f2;
            height: 30px;
        }
        
        #demoCardList1 {
            border: 1px solid #e6e6e6;
            border-top: none;
            padding: 10px;
            overflow: auto;
            height: -webkit-calc(100vh - 110px);
            height: -moz-calc(100vh - 110px);
            height: calc(100vh - 110px);
        }
    </style>
</head>

<body>
    <!-- js部分 -->
    <div>
        <script type="text/javascript" src="/admin/assets/libs/layui/layui.js"></script>
        <script type="text/javascript" src="/admin/assets/js/common.js"></script>
    </div>
    <script>
        layui.use(['checkbox', 'layer', 'dataGrid', 'laypage', 'element', 'dropdown', 'form'], function() {
            var $ = layui.$;
            var layer = layui.layer;
            var checkbox = layui.checkbox;
            var element = layui.element;
            var form = layui.form;
            var cb = checkbox.render({
                elem: "#testbox",
                data: [{
                    "id": 1,
                    "title": "姓名",
                    "type": "文本型"

                }, {
                    "id": 2,
                    "title": "年龄",
                    "type": "数值型"

                }, {
                    "userid": 3,
                    "fullname": "生日",
                    "type": "日期型"
                }, {
                    "userid": 4,
                    "fullname": "电话",
                    "type": "文本型"
                }, {
                    "userid": 5,
                    "fullname": "微信",
                    "type": "文本型"
                }, {
                    "userid": 6,
                    "fullname": "邮箱",
                    "type": "文本型"
                }, {
                    "userid": 7,
                    "fullname": "备注",
                    "type": "文本型"
                }],
                click: function(node) {
                    console.log("点击", node);
                },
                del: function(node) {
                    console.log("删除", node);
                    return true;
                },
                checked: function(len) {
                    console.log("选中:" + len);
                }
            });
            // parseData: function(res) {
            //     var data = {
            //         "id": res.userid,
            //         "title": res.fullname
            //     }
            //     return data;
            // }
            form.on('checkbox(checkall)', function(data) {

                console.log(data);
                if (data.elem.checked) {
                    cb.checkedAll()
                } else {
                    cb.unCheckedAll();
                }

                form.render('checkbox');
            });
            $("#btn_checkedALL").click(function() {
                cb.checkedAll()
            });
            $("#btn_uncheckALL").click(function() {
                cb.unCheckedAll()
            });
            $("#btn_checkstatus").click(function() {
                var d = cb.checkStatus();
                layer.alert(JSON.stringify(d));
            });
            $("#bn_remove").click(function() {
                cb.remove(1);
            });
            $("#btn_setchecked").click(function() {
                cb.setChecked(2);
            });
            $("#btn_delchecked").click(function() {
                cb.removeChecked();
            });

        });
    </script>
    <!-- 正文开始 -->
    <form id="form" class="layui-form" style="padding-right: 20px;">
        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="layui-inline">
                        <button id="btn_checkedALL" class="layui-btn icon-btn" type="button">
                        <i class="layui-icon">&#xe615;</i>全选
                    </button>&nbsp;
                        <button id="btn_uncheckALL" class="layui-btn icon-btn" type="button">
                        <i class="layui-icon">&#xe615;</i>反选
                    </button>&nbsp;
                        <button id="btn_checkstatus" class="layui-btn icon-btn" type="button">
                        <i class="layui-icon">&#xe654;</i>获取选中值
                    </button>
                        <button id="btn_setchecked" class="layui-btn icon-btn" type="button">
                        <i class="layui-icon">&#xe622;</i>设置选中
                    </button>
                        <button id="btn_delchecked" class="layui-btn icon-btn" type="button">
                        <i class="layui-icon">&#xe622;</i>删除选中
                    </button>
                        <button id="bn_remove" class="layui-btn icon-btn" type="button">
                        <i class="layui-icon">&#xe758;</i>删除
                    </button>
                    </div>
                </div>
                <div class="layui-card-body" style="padding: 10px;">
                    <div class="layui-form toolbar" id="titlebar">
                        <div style="float: left">

                        </div>
                        <div style="float: right">
                            <input id="checkall" type="checkbox" title="全选" lay-skin="primary" lay-filter="checkall">
                        </div>
                    </div>
                    <div id="testbox"></div>
                </div>
            </div>
        </div>
    </form>

</body>

</html>